<template>
  <div>
    <el-card v-loading="loading">
      <div slot="header">
        <el-button type="primary" size="small" @click="add">增加实验</el-button>
      </div>
      <!-- 主体部分的表格 -->
      <el-table stripe :data="tableData" style="width: 100%" :current-row-key="tableData.id">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column type="index" label="编号" width="50">
        </el-table-column>
        <el-table-column label="实验名称">
          <template slot-scope="slotProps">
            {{slotProps.row.name}}
          </template>
        </el-table-column>
        <el-table-column label="实验描述">
          <template slot-scope="slotProps">
            {{slotProps.row.description}}
          </template>
        </el-table-column>
        <el-table-column label="录入时间">
          <template slot-scope="slotProps">
            {{slotProps.row.createTime}}
          </template>
        </el-table-column>
        <!-- <el-table-column label="类型">
          <template slot-scope="slotProps">
            {{slotProps.row.type}}
          </template>
        </el-table-column> -->
        <el-table-column label="操作" width="200">
          <template slot-scope="slotProps">
            <el-button type="text" @click="edit(slotProps.$index)">修改</el-button>
            <el-button type="text" @click="edit(slotProps.$index)">通过</el-button>
            <el-button type="text" @click="del(slotProps.$index)">驳回</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 底部的翻页器 -->
      <div v-if="page.total > page.pageSize" class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :pager-count="5"
          :total="page.total"
          :page-size="page.pageSize"
          :current-page="page.current"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 点击删除按钮出现的弹框 -->
    <el-dialog
      :title="delDialog.title"
      :visible.sync="delDialog.show"
      width="500px"
      center>
      <span>{{delDialog.content}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialog.show = false">取 消</el-button>
        <el-button type="primary" @click="delSure">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 点击添加、编辑出现的弹框 -->
    <el-dialog
      :title="adedDialog.title"
      :visible.sync="adedDialog.show"
      :before-close="handleClose"
      top="15px"
      width="900px"
      center>
      <el-form ref="form" :model="formData" label-width="80px;">
        <el-form-item label="实验名称">
          <el-input v-model="formData.name" placeholder="请输入实验名称"></el-input>
        </el-form-item>
        <el-form-item label="实验描述">
          <el-input v-model="formData.description" type="textarea" placeholder="请输入实验描述"></el-input>
        </el-form-item>

        <el-form-item :label="item.label" v-for="(item, index) in experiFields" :key="index">
          <el-input v-model="formData.name" type="textarea" :placeholder="'请输入' + item.label"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer">
        <el-button @click="restForm">重 置</el-button>
        <el-button type="primary" v-show="adedDialog.showButton" @click="editSure">立即提交</el-button>
        <el-button type="primary" v-show="!adedDialog.showButton" @click="addSure">立即提交</el-button>
        <el-button @click="adedDialog.show = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import request from '@/utils/request'
export default {
  data() {
    return {
      experiFields: [{
        name: 'p',
        label: '实验目的',
        val: null
      }, {
        name: 'c',
        label: '实验环境',
        val: null
      }, {
        name: 'c',
        label: '实验准备',
        val: null
      }, {
        name: 'c',
        label: '实验内容',
        val: null
      }],
      loading: true,
      page: {
        total: 10,
        pageSize: 10,
        currentPage: 1,
        labTotal: 10,
        pageLabSize: 1000,
        currentLabPage: 1
      },
      tableData: [],
      delDialog: {
        show: false,
        content: '',
        title: '删除',
        id: ''
      },
      adedDialog: {
        show: false,
        content: '',
        title: '',
        showButton: ''
      },
      formData: {
        name: '',
        description: ''
      },
      currentIndex: {
        editIndex: '',
        delIndex: ''
      } // 当前所操作的数据的下标
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() { // 查询实验分页信息，获取实验列表
      this.loading = true
      return request.get('/items/labExperiment/page', { params: {
        status: 0,
        size: this.page.pageSize,
        current: this.page.currentPage
      }}).then(res => {
        if (!res.code) {
          this.tableData = res.content.records
          this.page.total = res.content.total
          this.loading = false
        }
      })
    },
    // 删除操作
    del(index) {
      this.currentIndex.delIndex = index
      this.delDialog.content = '您确定删除 ' + this.tableData[this.currentIndex.delIndex].name + ' 吗？'
      this.delDialog.id = this.tableData[this.currentIndex.delIndex].id
      this.delDialog.show = true
    },
    delSure() {
      this.delDialog.show = false
      request.delete(`/items/labExperiment/${this.delDialog.id}`).then(res => {
        if (!res.code) {
          this.$message.success('删除成功')
          this.getList()
        }
      })
    },
    getListOfId(id) { // 根据id查询实验详细信息
      request.get(`/items/labExperiment/${id}`).then(res => {
        this.formData = res.content
      })
    },
    edit(index) { // 编辑操作
      this.currentIndex.editIndex = index
      var currentId = this.tableData[this.currentIndex.editIndex].id
      this.getListOfId(currentId)
      this.adedDialog.title = '编辑'
      this.adedDialog.show = true
      this.adedDialog.showButton = true
    },
    editSure() { // 提交根据id查询得到的详细数据
      request.put('/items/labExperiment',
        {
          description: this.formData.description,
          id: this.formData.id,
          name: this.formData.name
        }).then(res => { // 以对象形式传参
        this.adedDialog.show = false
        if (!res.code) {
          this.tableData.splice(this.currentIndex.editIndex, 1, this.formData) // 置换该处的元素
        }
      })
    },
    add() { // 添加操作
      this.formData = {}
      this.formData.description = ''
      this.adedDialog.title = '添加'
      this.adedDialog.show = true
      this.adedDialog.showButton = false
    },
    addSure() { //  经过通信，formData与表单中的数据绑定
      request.post('/items/labExperiment', {
        ...this.formData
      }).then(res => {
        this.adedDialog.show = false
        if (!res.code) {
          this.getList()
        }
      })
    },
    // 翻页时触发该函数
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    },
    // 关闭弹窗时会触发该钩子
    handleClose() {
      this.adedDialog.show = false
      this.restForm()
    },
    // 重置表单函数
    restForm() {
      this.formData = {} // 将表单置空
    }
  }
}
</script>

<style scoped>
.pagination {
  float: right;
  margin-top: 15px;
  margin-bottom: 15px;
}
</style>
